import { defineAsyncComponent, defineComponent, shallowRef, useTemplateRef, watchEffect } from 'vue'
const CustomPrompt = defineAsyncComponent(() => import('./components/custom-prompt'))
const CustomGenerate = defineAsyncComponent(() => import('./components/custom-generate'))

export default defineComponent({
  name: 'promptComponent',
  props: {
    model: {
      type: Object,
      required: true,
    },
  },
  emits: ['update:model'],
  setup({ model }) {
    const customPromptRef = useTemplateRef<typeof CustomPrompt>('custom-prompt-ref')
    const customGenerateRef = useTemplateRef<typeof CustomGenerate>('custom-generate-ref')
    const mentionsValue = shallowRef('')
    const mentionsOptions = shallowRef([
      {
        value: 'afc163',
        label: 'afc163',
      },
      {
        value: 'zombieJ',
        label: 'zombieJ',
      },
      {
        value: 'yesmeck',
        label: 'yesmeck',
      },
    ])

    console.log('查看数据', model)

    return () => (
      <>
        <a-form-item
          class="[&_label]:pointer-events-none"
          v-slots={{
            label: () => (
              <>
                <a-flex class="w-full" justify="space-between" align="center">
                  <span>人设与回复逻辑</span>
                  <a-flex>
                    <a-button
                      class="pointer-events-auto"
                      type="link"
                      primary
                      onClick={() => customPromptRef.value.show()}
                    >
                      自定义
                    </a-button>
                    <a-button
                      class="pointer-events-auto"
                      type="link"
                      primary
                      onClick={() => customGenerateRef.value.show()}
                    >
                      AI自定义生成
                    </a-button>
                  </a-flex>
                </a-flex>
              </>
            ),
            default: () => (
              <>
                <a-mentions
                  class="b-1 b-#E1E4E8 b-solid border-rd-[8px_8px_0_0] pa-24px outline-none"
                  v-model:value={mentionsValue.value}
                  autofocus
                  options={mentionsOptions.value}
                ></a-mentions>
                <div class="b-t-none b-l b-r b-b b-#E1E4E8 b-solid border-rd-[0_0_8px_8px] pa-24px">
                  我是变量
                </div>
              </>
            ),
          }}
        ></a-form-item>
        {/* 自定义提示词 */}
        <CustomPrompt ref="custom-prompt-ref" />
        {/* 自定义生成 */}
        <CustomGenerate ref="custom-generate-ref" />
      </>
    )
  },
})
